body {
  background: url(../images/bg.jpg) no-repeat;
  background-position: top; }

.container {
  width: 100%; }
  .container .box {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    text-align: center; }
    .container .box .bg {
      width: 80%;
      margin: 0 auto;
      margin-top: 50px;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 10px;
      overflow: hidden; }
    .container .box h1 {
      padding-top: 50px;
      color: #FFF;
      font-size: 36px; }
    .container .box .level {
      padding: 20px 0; }
      .container .box .level .grade {
        width: 30%;
        margin: 25px auto;
        height: 50px;
        line-height: 50px;
        border: 1px solid #fff;
        border-radius: 10px;
        overflow: hidden;
        background-color: #fff;
        box-shadow: 2px 2px 2px #ccc;
        color: #2b2b2b; }
        .container .box .level .grade:hover {
          background-color: skyblue;
          border: 1px solid skyblue;
          box-shadow: 2px 2px 2px skyblue;
          color: #FFF;
          cursor: pointer; }
